<template>
    <div>
        <div class="btn_group">
		    	<el-button type="primary" size="medium" @click="handleCreate">新建</el-button>
		    </div>
        <el-table :data="tableData" style="width: 100%" :row-style="{fontWeight: 600, textAlign: 'center'}" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center'}" >
          <el-table-column prop="category" label="智能体类别" width="200" />
          <el-table-column prop="c_name" label="名称" width="200" />
          <el-table-column prop="algorithms" label="算法" width="500" />
          <el-table-column prop="detail" label="详细"  >
              <template #default="scope">
                  <div class="detail">
                      <el-button type="success" size="small" @click="handleDetail(scope.row)">详情</el-button>
                      <el-button type="danger" size="small" @click="handleDeleteRow(scope.row.id)">删除</el-button>
                  </div>
              </template>
          </el-table-column>
        </el-table>
        <div class="block">
          <el-pagination layout="prev, pager, next" :total="10"></el-pagination>
        </div>
        <el-dialog
          v-model="dialogVisible"
          title="新增智能体"
          width="50%"
          :before-close="handleClose"
        >
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="智能体名称">
              <el-input v-model="form.c_name" placeholder="请输入智能体名称"></el-input>
            </el-form-item>
            <el-form-item label="智能体类别">
              <el-select v-model="form.category" placeholder="请选择类别">
                <el-option label="IRL" value="IRL"></el-option>
                <el-option label="CTDE" value="CTDE"></el-option>
                <el-option label="IPL" value="IPL"></el-option>
                <el-option label="CTDE" value="CTDE"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="智能体算法">
              <el-select v-model="form.algorithms" placeholder="请选择算法">
                <el-option label="DQN" value="DQN"></el-option>
                <el-option label="MADDPG" value="MADDPG"></el-option>
                <el-option label="QMIX" value="QMIX"></el-option>
                <el-option label="PPO" value="PPO"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="handleConfirm"
                >确认</el-button
              >
            </span>
          </template>
        </el-dialog>
        <el-dialog
          v-model="detailDialog"
          title="详情"
          width="50%"
          :before-close="handleClose"
        >
          <h4>智能体类别：{{detailData.category}}</h4>
          <h4>智能体算法：{{detailData.algorithms}}</h4>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="detailDialog = false"
                >关闭</el-button
              >
            </span>
          </template>
        </el-dialog>
    </div>
</template>

<script>
import { ElMessageBox, ElMessage } from 'element-plus'
import * as categoryApi from './api'

export default {
  data () {
    return {
      tableData: [],
      showSelect: false,
      dialogVisible: false,
      detailDialog: false,
      form: {
        c_name: '',
        algorithms: '',
        category: ''
      },
      detailData: {}
    }
  },
  methods: {
    query () {
      categoryApi.battleList().then(res => {
        this.tableData = res
      })
    },
    handleCreate () {
      this.dialogVisible = true
    },
    handleSelect () {
      this.showSelect = !this.showSelect
    },
    handleSelectionChange (val) {
      this.multipleSelection = val
    },
    handleDelete () {
      this.tableData = this.tableData.filter(item => !this.multipleSelection.includes(item))
      this.showSelect = false
    },
    handleConfirm () {
      ElMessageBox.confirm(
        '是否确定新增',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        categoryApi.vs_add(this.form).then(res => {
          if (res) {
            ElMessage({
              message: '新增成功',
              type: 'success'
            })
            this.query()
          } else {
            ElMessage({
              message: '新增失败',
              type: 'danger'
            })
          }
        })
        this.dialogVisible = false
      })
    },
    handleClose (done) {
      done()
    },
    handleDetail (data) {
      this.detailDialog = true
      this.detailData = data
    },
    handleDeleteRow (id) {
      ElMessageBox.confirm(
        '是否确定删除',
        'Warning',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        categoryApi.vs_del(id).then(res => {
          if (res) {
            ElMessage({
              message: '删除成功',
              type: 'success'
            })
            this.query()
          } else {
            ElMessage({
              message: '删除失败',
              type: 'danger'
            })
          }
        })
        this.dialogVisible = false
      })
    }
  },
  mounted () {
    this.query()
  }
}
</script>

<style lang="scss" scoped>
    .block {
        position: absolute;
        right: 20px;
        margin-top: 30px;
    }
    .detail {
        text-align: center;
    }
    .el-select {
      display: block;
    }
</style>
